import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Layout, UI, useThemeColors } from '@gaozh1024/rn-toolkit';

const IconButtonTestScreen: React.FC = () => {
  const colors = useThemeColors();

  const styles = StyleSheet.create({
    section: { marginBottom: 16 },
    card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
    row: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12 },
    borderedRow: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12, borderWidth: 1, borderColor: colors.border, padding: 8 },
  });

  const [lastEvent, setLastEvent] = useState<string>('暂无');

  return (
    <Layout.Page
      headerShown
      headerProps={{ title: 'IconButton 测试', backVisible: true }}
      padding={16}
      scrollable
      testID="IconButtonTestScreen"
    >
      {/* 基础用法：name（默认 type=ionicons） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础用法</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>默认使用 ionicons；设置 name 即可渲染</UI.Text>
          <View style={styles.row}>
            <UI.IconButton name="home" testID="iconbutton-basic-home" loading={true} loadingAnimation={'spinOnce'} />
            <UI.IconButton name="settings" testID="iconbutton-basic-settings" />
            <UI.IconButton name="star" testID="iconbutton-basic-star" />
            <UI.IconButton name="person" testID="iconbutton-basic-person" />
          </View>
        </Layout.Card>
      </View>

      {/* 类型：type（明确指定 ionicons） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>图标库类型</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>type 指定图标库（此处明确为 ionicons）</UI.Text>
          <View style={styles.row}>
            <UI.IconButton name="home-outline" type="ionicons" testID="iconbutton-type-ionicons-home-outline" />
            <UI.IconButton name="notifications-outline" type="ionicons" testID="iconbutton-type-ionicons-notifications-outline" />
            <UI.IconButton name="wifi-outline" type="ionicons" testID="iconbutton-type-ionicons-wifi-outline" />
          </View>
        </Layout.Card>
      </View>

      {/* 尺寸：size（数值） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>尺寸</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>size 使用数值控制图标大小</UI.Text>
          <View style={styles.row}>
            <UI.IconButton name="star" size={16} testID="iconbutton-size-16" />
            <UI.IconButton name="star" size={20} testID="iconbutton-size-20" />
            <UI.IconButton name="star" size={28} testID="iconbutton-size-28" />
            <UI.IconButton name="star" size={36} testID="iconbutton-size-36" />
          </View>
        </Layout.Card>
      </View>

      {/* 颜色：color（主题与自定义） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>颜色</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>支持主题预设（primary/secondary/text/...）与自定义 hex</UI.Text>
          <View style={styles.row}>
            <UI.IconButton name="heart" color="primary" testID="iconbutton-color-primary" />
            <UI.IconButton name="heart" color="secondary" testID="iconbutton-color-secondary" />
            <UI.IconButton name="heart" color="error" testID="iconbutton-color-error" />
            <UI.IconButton name="heart" color="success" testID="iconbutton-color-success" />
            <UI.IconButton name="heart" color="#FF5722" testID="iconbutton-color-custom-ff5722" />
          </View>
        </Layout.Card>
      </View>

      {/* 变体：variant filled/ghost/outline */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>变体</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>filled/ghost/outline（outline 带边框；filled 默认使用 surface 背景）</UI.Text>
          <View style={styles.row}>
            <UI.IconButton name="thumbs-up" variant="filled" color="primary" testID="iconbutton-variant-filled" />
            <UI.IconButton name="thumbs-up" variant="ghost" color="primary" testID="iconbutton-variant-ghost" />
            <UI.IconButton name="thumbs-up" variant="outline" color="primary" testID="iconbutton-variant-outline" />
          </View>
        </Layout.Card>
      </View>

      {/* 禁用：disabled（事件禁用 + 变灰显示） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>禁用</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>禁用后图标颜色使用 textDisabled，容器降低不透明度，事件不触发</UI.Text>
          <View style={styles.row}>
            <UI.IconButton name="lock-closed" disabled testID="iconbutton-disabled" />
            <UI.IconButton name="lock-open" disabled onPress={() => setLastEvent('should-not-fire')} testID="iconbutton-disabled-onpress" />
          </View>
        </Layout.Card>
      </View>

      {/* 交互事件：onPress/onPressIn/onPressOut/onLongPress */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>交互事件</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>验证各类触摸事件分发</UI.Text>
          <UI.Text variant="body1" color="textSecondary" mb={8}>最近事件：{lastEvent}</UI.Text>
          <View style={styles.row}>
            <UI.IconButton name="hand-left" color="info"
              onPress={() => setLastEvent('onPress')}
              onPressIn={() => setLastEvent('onPressIn')}
              onPressOut={() => setLastEvent('onPressOut')}
              onLongPress={() => setLastEvent('onLongPress')}
              testID="iconbutton-events-all"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 点击区域：hitSlop（扩大点击区）与 accessibilityLabel */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>可达性与命中区域</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>hitSlop 扩大点击区域；accessibilityLabel 自定义可达性标签</UI.Text>
          <View style={styles.borderedRow}>
            <UI.IconButton
              name="ellipse"
              size={16}
              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
              accessibilityLabel="小圆按钮"
              testID="iconbutton-hitslop-16"
            />
            <UI.IconButton
              name="ellipse-outline"
              size={20}
              hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
              accessibilityLabel="中圆按钮"
              testID="iconbutton-hitslop-20"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 间距：SpacingProps（m/p/mh/mv/ph/pv）展示 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>间距</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>m/p/mh/mv/ph/pv 均支持，用于容器的外/内边距</UI.Text>
          <View style={styles.borderedRow}>
            <UI.IconButton name="cube" m={8} testID="iconbutton-spacing-m-8" />
            <UI.IconButton name="cube" mh={12} testID="iconbutton-spacing-mh-12" />
            <UI.IconButton name="cube" mv={12} testID="iconbutton-spacing-mv-12" />
            <UI.IconButton name="cube" p={8} testID="iconbutton-spacing-p-8" />
            <UI.IconButton name="cube" ph={12} testID="iconbutton-spacing-ph-12" />
            <UI.IconButton name="cube" pv={12} testID="iconbutton-spacing-pv-12" />
          </View>
        </Layout.Card>
      </View>

      {/* 阴影：ShadowProps（shadowSize 等） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>阴影</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>展示主题阴影预设：sm/md/lg/xl/glow/top</UI.Text>
          <View style={styles.row}>
            <UI.IconButton name="flame" shadowSize="sm" testID="iconbutton-shadow-sm" />
            <UI.IconButton name="flame" shadowSize="md" testID="iconbutton-shadow-md" />
            <UI.IconButton name="flame" shadowSize="lg" testID="iconbutton-shadow-lg" />
            <UI.IconButton name="flame" shadowSize="xl" testID="iconbutton-shadow-xl" />
            <UI.IconButton name="flame" shadowSize="glow" testID="iconbutton-shadow-glow" />
            <UI.IconButton name="flame" shadowSize="top" testID="iconbutton-shadow-top" />
          </View>
        </Layout.Card>
      </View>

      {/* 渐变背景：GradientProps（linear/radial 等） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>渐变背景</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>支持 linear/radial；需开启 gradientEnabled</UI.Text>
          <View style={styles.row}>
            <UI.IconButton
              name="flash"
              color="text"
              gradientEnabled
              gradientVariant="linear"
              gradientColors={[colors.primary, colors.secondary]}
              gradientAngle={45}
              testID="iconbutton-gradient-linear-45"
            />
            <UI.IconButton
              name="flash"
              color="text"
              gradientEnabled
              gradientVariant="radial"
              gradientColors={['#FF8A00', '#FFD500']}
              gradientRadius={80}
              testID="iconbutton-gradient-radial"
            />
            <UI.IconButton
              name="flash"
              color="text"
              gradientEnabled
              gradientVariant="linear"
              gradientColors={['#3F51B5', '#2196F3', '#03A9F4']}
              gradientLocations={[0, 0.5, 1]}
              gradientAngle={135}
              gradientOpacity={0.85}
              testID="iconbutton-gradient-linear-locations"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 盒子样式：BoxProps（背景/边框/圆角/尺寸） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>盒子样式</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>通过 BoxProps 控制背景、边框、圆角、尺寸</UI.Text>
          <View style={styles.row}>
            <UI.IconButton
              name="brush"
              variant="filled"
              backgroundColor={colors.surface}
              borderWidth={1}
              borderColor={colors.border}
              borderRadius={16}
              width={48}
              height={48}
              testID="iconbutton-box-filled-border"
            />
            <UI.IconButton
              name="brush"
              variant="outline"
              backgroundColor="transparent"
              borderWidth={2}
              borderColor="#90CAF9"
              borderRadius={24}
              width={56}
              height={56}
              testID="iconbutton-box-outline-border"
            />
            <UI.IconButton
              name="brush"
              variant="ghost"
              transparent
              width={40}
              height={40}
              testID="iconbutton-box-ghost-transparent"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 自定义样式：style（不透明度/变换等） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>自定义样式</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>style 可叠加到最终容器样式</UI.Text>
          <View style={styles.row}>
            <UI.IconButton name="aperture" style={{ opacity: 0.6 }} testID="iconbutton-style-opacity-06" />
            <UI.IconButton name="aperture" style={{ transform: [{ scale: 1.2 }] }} testID="iconbutton-style-transform-scale" />
          </View>
        </Layout.Card>
      </View>
    </Layout.Page>
  );
};

export default IconButtonTestScreen;